<template>
  <div>
    <h3>ikun黑店</h3>
    <MyProdact 
    v-for="item in list" 
    :key="item.id"
    :pron="item.proname"
    :proprice="item.proprice"
    :desc="item.desc"
    :del="item.id"
    @bargain="bargain"
    ></MyProdact>
  </div>
</template>

<script>
import MyProdact from './components/MyProdact.vue'
export default {
  components:{
    MyProdact,
  },
  data() {
    return {
      list: [
        {
          id: 1,
          proname: '超级好吃棒棒糖',
          proprice: 188,
          low: 160,
          desc: '甜',
        },
        {
          id: 2,
          proname: '超级好吃的大鸡腿',
          proprice: 360,
          low: 320,
          desc: '香',
        },
        { id: 3, proname: '超级无敌冰激凌', proprice: 42, low: 30, desc: '冰' },
        {
          id: 4,
          proname: '超级好吃棒棒糖',
          proprice: 188,
          low: 160,
          desc: '甜',
        },
        {
          id: 5,
          proname: '超级好吃的大鸡腿',
          proprice: 360,
          low: 320,
          desc: '香',
        },
        { id: 6, proname: '超级无敌冰激凌', proprice: 42, low: 30, desc: '冰' },
      ],
    }
  },

  methods:{
    bargain(id){
      // console.log(id);
      // this.list.filter
      const arr = this.list.filter(item => item.id === id)
      // console.log(arr);

      arr[0].proprice -= 10

      // console.log(arr[0].proprice);

      if(arr[0].proprice > arr[0].low){
        return alert('砍价成功')
      }else{
        arr.proprice = arr.low
        return alert('不要砍了，成本价了')
      }
      
    //  this.list.forEach(item=>{
    //   if(item.id === id){
    //     item.proprice -= 10
    //     if(item.proprice > item.low){
    //       return alert('砍价成功')
    //     }else{
    //       item.proprice = item.low

    //       return alert('不要砍了，成本价了')
    //     }
    //   }
    //  })


    }
  },
}
</script>

<style>
  .product {
  width: 400px;
  border: 3px solid #000;
  border-radius: 5px;
  margin: 10px;
  padding: 0 20px;
}
  </style>